<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("../img/背景.jpg");
            background-repeat: no-repeat; /*图片不重复*/
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
        }

        .center{
            background: white;
            width: 400px;
            text-align: center;
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <img src="../img/logo.png">
    </div>

    <div class="center">
        <div>注册详情</div>
        <hr/>

        <!--表单标签-->
        <form action="#" method="get" autocomplete="off">
            <div>
                <label for="username">姓名：</label>
                <input type="text" id="username" name="username" value="" placeholder="在此输入姓名" required/>
            </div>

            <div>
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" value="" placeholder="在此输入密码" required/>
            </div>

            <div>
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" value="" placeholder="在此输入邮箱" required/>
            </div>

            <div>
                <label for="tel">手机：</label>
                <input type="tel" id="tel" name="tel" value="" placeholder="在此输入手机号" required/>
            </div>
            <hr/>

            <div>
                <label for="gender">性别：</label>
                <input type="radio" checked id="gender" name="gender" value="men"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="women"/>女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>

            <div>
                <label for="hobby">爱好：</label>
                <input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
                <input type="checkbox" name="hobby" value="movie"/>电影
                <input type="checkbox" name="hobby" value="game"/>游戏
            </div>

            <div>
                <label for="birthday">出生日期：</label>
                <input type="tel" id="birthday" name="birthday" value="" required/>
            </div>

            <div>
                <label for="city">所在城市：</label>
                <select id="city" name="city">
                    <option>---请选择城市---</option>
                    <optgroup label="直辖市">
                        <option>北京</option>
                        <option>上海</option>
                        <option>重庆</option>
                        <option>天津</option>
                    </optgroup>
                    <optgroup label="省会市">
                        <option>西安</option>
                        <option>杭州</option>
                        <option>郑州</option>
                        <option>武汉</option>
                    </optgroup>
                </select>
            </div>
            <hr/>

            <div>
                <label for="desc">个性签名：</label>
                <textarea id="desc" name="desc" rows="5" cols="40" placeholder="请写下您的与众不同"></textarea>
            </div>
            <hr/>

            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </form>
    </div>
</body>
</html>